<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 400px;
      height: 400px;
      background-color: grey;
      overflow: hidden;
      margin: 50px auto;
    }

    .sub {
      width: 300px;
      height: 300px;
      background-color: pink;
      overflow: hidden;
      margin: 50px auto;
    }

    .txt {
      width: 100px;
      height: 100px;
      background-color: yellow;
      overflow: hidden;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="sub">
      <div class="txt"></div>
    </div>
  </div>
</body>
<script>
  // 事件两种传播方式

  // 前提: 父子元素绑定同类型的事件

  // 事件冒泡:  从最特定的元素 到 最不特定的元素,从内到外逐层触发   (IE)
  // txt => sub => wrap => body => html => document => window  

  // 事件捕获:  从最不特定的元素 到 最特定的元素,从外到内 层层递进  (网景)
  // window  => document => html => body => wrap => sub => txt

  // => 主流:  事件冒泡 
  // DOM一级事件 只能冒泡,不能捕获

  // W3C 新增事件监听, 可以选择事件捕获 / 事件冒泡的方式触发事件
  // Element.addEventListener(type,callback,capture)
  // Element    绑定事件元素
  // type       绑定的事件类型
  // callback   事件触发时执行的回调函数
  // capture    是否在捕获阶段触发事件  (true:捕获  false:冒泡(默认))

  // 事件流
  // 1. 捕获阶段   从window开始,向内层层递进 知道遇到目标元素为止
  //       window  => document => html => body => wrap => sub => txt
  // 2. 目标阶段   目标元素如果有事件则触发 否则跳过
  // 3. 冒泡阶段   从目标元素的父元素开始 想外层冒泡
  //       txt => sub => wrap => body => html => document => window 


  var wrap = document.getElementsByClassName("wrap")[0];
  var sub = document.getElementsByClassName("sub")[0];
  var txt = document.getElementsByClassName("txt")[0];

  window.addEventListener("click", function () {
    console.log("捕获阶段", "window被点击");
  }, true);
  document.addEventListener("click", function () {
    console.log("捕获阶段", "document被点击");
  }, true);
  document.documentElement.addEventListener("click", function () {
    console.log("捕获阶段", "html被点击");
  }, true);
  document.body.addEventListener("click", function () {
    console.log("捕获阶段", "body被点击");
  }, true);
  wrap.addEventListener("click", function () {
    console.log("捕获阶段", "wrap被点击");
  }, true);
  sub.addEventListener("click", function () {
    console.log("捕获阶段", "sub被点击");
  }, true);
  txt.addEventListener("click", function () {
    console.log("捕获阶段", "txt被点击");
  }, true);

  window.addEventListener("click", function () {
    console.log("冒泡阶段", "window被点击");
  }, false);
  document.addEventListener("click", function () {
    console.log("冒泡阶段", "document被点击");
  }, false);
  document.documentElement.addEventListener("click", function () {
    console.log("冒泡阶段", "html被点击");
  }, false);
  document.body.addEventListener("click", function () {
    console.log("冒泡阶段", "body被点击");
  }, false);
  wrap.addEventListener("click", function () {
    console.log("冒泡阶段", "wrap被点击");
  }, false);
  sub.addEventListener("click", function () {
    console.log("冒泡阶段", "sub被点击");
  }, false);
  txt.addEventListener("click", function () {
    console.log("冒泡阶段", "txt被点击");
  }, false);


</script>

</html>